<template>
  <div class="op-search">
    <div class="op-search-header">
      <div class="search-box">
        <div class="to-left" @click="onBack"><van-icon size="25" color="#fff"  name="arrow-left" /></div>
        <van-search
          v-model="searchVal"
          show-action
          shape="round"
          placeholder="请输入搜索关键词"
        >
          <template #action>
            <div @click="onClickButton">搜索</div>
          </template>
        </van-search>
      </div>
    </div>
    <div class="search-recommend">
      <van-tag
        v-for="item in recomments"
        :key="item.value"
        round
        type="primary"
        >{{ item.label }}</van-tag
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { defineProps, defineEmits } from "vue";
import type { ISerachRecomment } from "@/types";
const searchVal = ref("");
const props = defineProps<IProps>();
interface IProps {
  recomments: ISerachRecomment[];
}

interface IProps {
  showAction?: boolean;
  background?: string;
  placeholder?: string;
  shape?: string;
  modelValue?: string | number;
}

const emits = defineEmits<IEmits>();

interface IEmits {
  (e: "search", v?: string | number): void;
  (e: "clear"): void;
  (e: "cencel"): void;
  (e: "update:modelValue", v?: string | number): void;
}

const onBack = () => {
    emits("cencel");
};

const onKeypress = (e: KeyboardEvent) => {
  if (e.key === "Enter") {
    e.preventDefault();
    emits("search", props.modelValue);
  }
};

const onClickButton = (e) => {
  emits("search", searchVal.value);
  console.log(searchVal.value)
};

const onClear = () => {
  emits("clear");
  emits("update:modelValue", "");
};

const onCancel = () => {
  emits("cencel");
};

const onInput = (e: InputEvent) => {
  emits("update:modelValue", (e.target as HTMLInputElement).value);
};
</script>

<style lang="scss" scoped>
.op-search {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background: #fff;
  .op-search-header {
    overflow: hidden;
    background: #fff;
    .van-icon-arrow-left{
      color: #666 !important;
    }
  }
  .search-box{
    width: 100%;
    display: flex;
    align-items: center;
    .to-left{
        width: 20px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .van-search{
        flex: 1;
    }
  }
  
}
:deep .van-search__action{
    color: #1faff3;
    font-size: 16px;
  }
:deep .van-search__action:active {
  color: #1faff3;
  }
</style>
